<template>
  <els-pagination-table :get-data="getData" :column="column" border :column-config="{ align: 'center' }">
    <el-table-column slot="img" label="logo" width="51" align="center">
      <template slot-scope="scope">
        <el-image style="display: block" :src="scope.row.logo_url" />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="224" align="center">
      <template slot-scope="scope">
        <el-button size="mini" type="success" @click="down(scope.row)">下载</el-button>
        <el-button size="mini" type="primary" @click="edit(scope.row)">修改</el-button>
        <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </els-pagination-table>
</template>

<script>
//模拟异步接口的数据
const data = require('./paginationTable/data.json')
// import data from './paginationTable/data.json'
function getData(currentPage, pageSize) {
  return new Promise((resolve) => {
    const list = data.slice(currentPage * pageSize - pageSize, currentPage * pageSize)
    const total = 40
    setTimeout(() => {
      resolve({
        list,
        total
      })
    }, 1000)
  })
}
export default {
  data() {
    return {
      column: [
        {
          type: 'index'
        },
        {
          prop: 'name',
          label: '应用名称',
          width: '180'
        },
        {
          type: 'slot',
          name: 'img'
        },
        {
          prop: 'single_word',
          label: '描述',
          minWidth: '180'
        },
        {
          prop: 'version_name',
          label: '版本',
          width: '120'
        },
        {
          prop: 'size_fixed',
          label: '大小',
          width: '100',
          formatter(row) {
            return row.size_fixed + 'M'
          }
        }
      ]
    }
  },
  methods: {
    async getData(currentPage, pageSize) {
      //异步从后端取数据，这个方法只是模拟的
      const res = await getData(currentPage, pageSize)
      return {
        list: res.list,
        total: res.total
      }
    },
    del(e) {
      console.log(e)
    },
    edit(e) {
      console.log(e)
    },
    down(e) {
      window.open(e.down_url)
    }
  }
}
</script>
